<template>
  <div>
    <a-drawer class="form1"
              :visible="dialogVisible"
              title="配货详情"
              placement="right"
              :width="1100"
              :closable="true"
              :after-visible-change="afterVisibleChange"
              @close="handleOk()">
      <div class="details-status"
           :style="{height: detailsHeight}">
        <div class="status-left">
          <a-row>
            <a-col :span="8">服务网点：</a-col>
            <a-col :span="16">{{distributionDetailsArr.tenantName}}</a-col>
          </a-row>
          <a-row class="row-style">
            <a-col :span="8">备注：</a-col>
            <a-col :span="16">{{distributionDetailsArr.comment}}</a-col>
          </a-row>
          <a-row style="margin-top:17px;margin-bottom:16px"
                 v-if="distributionDetailsArr.state === '0'">
            <a-col :span="8">订单编号：</a-col>
            <a-col :span="16">{{distributionDetailsArr.subOrderNo}}</a-col>
          </a-row>
          <a-row style="margin-top:25px;margin-bottom:22px"
                 v-if="distributionDetailsArr.state !== '0' && distributionDetailsArr.state !== '3'">
            <a-col :span="8">订单编号：</a-col>
            <a-col :span="16">{{distributionDetailsArr.subOrderNo}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="8">订单日期：</a-col>
            <a-col :span="16">{{distributionDetailsArr.createAt}}</a-col>
          </a-row>
        </div>
        <div class="status-right">
          <div class="status-right-top">
            <div class="chaoshi"
                 v-if="newDay !== '' && distributionDetailsArr.state == 2">
              已超时
              <span v-if="newDay !== 0"><i>{{newDay}}</i>天</span>
              <span v-if="newHouer !== '00'"><i>{{newHouer}}</i>小时</span>
              <span><i>{{newMinute}}</i>分钟</span>
            </div>
            <!-- <div class="daojishi"
                 v-if="!newDay">
              倒计时<i>{{newDay}}天 {{newHouer}}小时 {{newMinute}}分钟 {{newSs}}秒！</i>
            </div> -->
            <div class="top1"
                 v-if="distributionDetailsArr.state === '0'">
              <a-icon type="clock-circle" />
              期望配货完成时间：
              <i>{{distributionDetailsArr.expectDistributeTimeDate}}<span>{{distributionDetailsArr.expectDistributeTimeHH}}</span>
                ：<span>{{distributionDetailsArr.expectDistributeTimeMM}}</span></i>
            </div>
            <div class="top3"
                 v-if="distributionDetailsArr.state === '1'">
              <a-icon type="clock-circle" />
              配货完成时间：
              <i>{{distributionDetailsArr.distributeFinishTime}}</i>
            </div>
            <div class="top1"
                 v-if="distributionDetailsArr.state === '2'">
              <a-icon type="clock-circle" />
              期望上门提货时间：
              <i v-if="distributionDetailsArr.homeDeliveryTimeDate !== '--'">{{distributionDetailsArr.homeDeliveryTimeDate}}<span>{{distributionDetailsArr.homeDeliveryTimeHH}}</span>
                ：<span>{{distributionDetailsArr.homeDeliveryTimeMM}}</span></i>
              <i v-if="distributionDetailsArr.homeDeliveryTimeDate === '--'">{{distributionDetailsArr.homeDeliveryTimeDate}}</i>
            </div>
            <div class="top3"
                 v-if="distributionDetailsArr.state === '3'">
              <a-icon type="clock-circle" />
              提货完成时间：
              <i>{{distributionDetailsArr.actualDeliveryTime}}</i>
            </div>
            <div class="top2">
              <a-icon type="info-circle" />
              订单状态：
              <span class="croci"
                    v-if="distributionDetailsArr.state === '0'">待配货</span>
              <span class="croci"
                    v-if="distributionDetailsArr.state === '1'">已配货</span>
              <span class="croci"
                    v-if="distributionDetailsArr.state === '2'">待提货</span>
              <span class="croci"
                    v-if="distributionDetailsArr.state === '3'">已提货</span>
            </div>
          </div>
          <!-- //待配货 -->
          <div class="status-right-bottom"
               v-show="distributionDetailsArr.state === '0'">
            <div class="steps1">
              <a-steps :current="current">
                <a-step v-for="(item,index) in steps"
                        :key="index"
                        title=' '>
                  <template slot="icon">
                    <div class="iconimg"
                         :class=" index <= current? ' colordiv':'' "> {{index +1}}
                    </div>
                  </template>
                  <div slot="description"
                       :class=" index <= current? 'slotDiv color':'slotDiv' ">
                    {{item.title}}
                  </div>
                </a-step>
              </a-steps>
            </div>
          </div>

          <!-- //已配货 -->
          <div class="status-right-bottom"
               v-show="distributionDetailsArr.state !== '0'">
            <div class="steps1 steps1s">
              <a-steps :current="current">
                <a-step v-for="(item,index) in steps1"
                        :key="index"
                        title=' '>
                  <a-icon slot="icon"
                          type="check-circle" />

                  <!-- <template slot="icon">
                  <div class="iconimg"
                       :class=" index <= current? ' colordiv':'' "> {{index +1}}</div>
                </template> -->
                  <div slot="description"
                       :class=" index <= current? 'slotDiv color1':'slotDiv' ">
                    {{item.title}}
                  </div>
                  <template slot="description"
                            v-if="index <= current">
                    <div class="slotDiv1">{{item.time}}</div>
                  </template>
                </a-step>
              </a-steps>
            </div>
          </div>

        </div>
      </div>

      <div class="details-list">
        <div class="details-list-title">
          <span @click="cutTitle(1)"
                :class="{'active': titleIndex === 1}">物料明细</span>
          <span @click="cutTitle(2)"
                :class="{'active': titleIndex === 2}">包裹预览</span>
        </div>

        <div class="details-packbutton"
             v-show="titleIndex === 1">
          <a-button @click="addRsplitPackage()"
                    class="chaifen"
                    type="danger"
                    v-if="distributionDetailsArr.state === '0'">
            <img src="../../../../assets/image/sellerHub/dabao.png"
                 alt=""> 立即打包
          </a-button>
          <a-button class="qingdan"
                    @click="checklist = true">
            <img src="../../../../assets/image/sellerHub/dayin.png"
                 alt=""> 打印出库清单
          </a-button>
          <div></div>
        </div>

        <!-- //物料明细 -->
        <div class="details-list-material-box"
             v-show="titleIndex === 1">
          <div>
            <div class="material-tit">
              <span>物料编号</span>
              <span>物料名称</span>
              <span>规格</span>
              <span>计量单位</span>

              <span>含税单价（元）</span>
              <span>数量</span>
              <span>金额（元）</span>
              <span>未打包数量</span>
            </div>
            <div class="material-tit-li"
                 v-for="(item , index) in distributionDetailsArr.distributionMaterialDTOList"
                 :key="index">
              <span>{{item.materialNo}}</span>
              <span>{{item.materialName}}</span>
              <span>{{item.specifications}}</span>
              <span>{{item.unit}}</span>
              <span>{{item.price}}</span>
              <span>{{item.totalQuantity}}</span>
              <span>{{item.totalPrice}}</span>
              <span>{{item.unPackedQuantity}}</span>
            </div>
          </div>

        </div>
        <div class="details-list-parcel-box"
             v-show="titleIndex === 2">
          <div class="parcel-box remark-style">
            <a-button v-if="distributionDetailsArr.state === '0'"
                      key="submit"
                      @click="addRsplitPackage()">
              <img src="../../../../assets/image/sellerHub/xiugai.png"
                   alt="">
              编辑包裹
            </a-button>
            <a-button v-if="distributionDetailsArr.state !== '0'"
                      key="submit"
                      style="width:120px"
                      @click="addPrintPackage(baoguoList)">
              <img src="../../../../assets/image/sellerHub/xiugai.png"
                   alt="">
              打印包裹清单
            </a-button>
            <div v-if="distributionParcelDTOList.length === 0"
                 class="zanwu">
              <img src="../../../../assets/image/sellerHub/zanwu.png"
                   alt="">
              <p>暂无包裹</p>
              <a-button key="submit"
                        type="danger"
                        @click="addRsplitPackage()">
                立即打包
              </a-button>
            </div>
            <a-collapse>
              <a-collapse-panel :header="item.name"
                                v-for="(item,index) in distributionParcelDTOList"
                                :key="index"
                                :show-arrow="false">
                <div slot="extra"
                     class="extra-left">
                  <img src="../../../../assets/image/sellerHub/zhankai.png"
                       alt=""
                       class="zk">
                  <img src="../../../../assets/image/sellerHub/guanbi.png"
                       alt=""
                       class="gb">
                </div>
                <div slot="extra"
                     class="extra-right"
                     @click="handleClick">
                  <a-tooltip>
                    <template slot="title">
                      打印包裹清单
                    </template>
                    <img src="../../../../assets/image/sellerHub/dy.png"
                         alt="">
                  </a-tooltip>

                </div>
                <div class="material-tit">
                  <span>物料编号</span>
                  <span>物料名称</span>
                  <span>规格</span>
                  <span>计量单位</span>
                  <span>含税单价(元)</span>
                  <span>出库金额(元)</span>
                  <span>数量</span>
                </div>
                <div class="material-tit-li"
                     v-for="(item1 , index) in item.distributeMaterialDTOList"
                     :key="index">
                  <span>{{item1.materialNo}}</span>
                  <span>{{item1.materialName}}</span>
                  <span>{{item1.specifications}}</span>
                  <span>{{item1.unit}}</span>
                  <span>{{item1.price}}</span>
                  <span>{{item1.totalPrice}}</span>
                  <span>{{item1.packedQuantity}}</span>
                </div>
                <div class="material-remark">
                  <span>备注：</span>
                  <a-input v-model="item.comment"
                           placeholder="请添加备注" />
                </div>
              </a-collapse-panel>

            </a-collapse>
          </div>
        </div>
      </div>

      <div class="foots">
        <div class="foots-left">
          <span> <img src="../../../../assets/image/sellerHub/numbers.png"
                 alt=""> 物料总数量（个）：<i>{{materialNum}}</i> </span>
          <span> <img src="../../../../assets/image/sellerHub/ydabao.png"
                 alt=""> 已打包物料数量（个）：<i>{{materialPackOk}}</i> </span>
          <span> <img src="../../../../assets/image/sellerHub/wdabao.png"
                 alt=""> 未打包物料数量（个）：<i>{{materialPackNo}}</i> </span>
        </div>

        <div :class="{'foots-right':true,'activebutton': distributionDetailsArr.state !== '0'}"
             @click="distributionOk">配货完成
        </div>
      </div>
      <!-- //打印出库清单弹窗 -->
      <a-modal title="打印出库清单"
               width="440px"
               :visible="checklist"
               :dialog-style="{ top: '32vh' }"
               :destroy-on-close="true"
               :mask-closable="false"
               @cancel="handleCancel"
               ok-text="立即打印"
               cancel-text="取消"
               @close="handleCanOk"
               class="texte-class">
        <div>
          <span>打印数量：</span>
          <div style="float:right"
               class="checklist-class">
            <span>
              <a-icon type="minus" />
            </span>
            <a-input style="width:68px" />
            <span>
              <a-icon type="plus" />
            </span>
          </div>
        </div>
      </a-modal>
      <!-- 拆分打包组件 -->
      <SplitPackageForm ref="RsplitPackage1"
                        :visible="rsplitPackageUoload"
                        @confirmFileRsplitPackage="confirmFileRsplitPackage"
                        @cancel="rsplitPackageUoload = false"></SplitPackageForm>

      <!-- 打印包裹清单 -->
      <PrintForm ref="printPackage1"
                 :visible="printStatus"
                 @confirmPrint="confirmPrint"
                 @cancel="printStatus = false"></PrintForm>
    </a-drawer>
  </div>
</template>
<script>
import SplitPackageForm from "./splitPackage-add";
import PrintForm from "./printList";
export default {
  components: { SplitPackageForm, PrintForm },
  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dialogVisible: false,
      checklist: false,
      printStatus: false,
      //id
      id: '',
      //配货详情
      distributionDetailsArr: [],
      //包裹详情
      distributionParcelDTOList: [],
      //高度
      detailsHeight: '',
      //配货是否完成 已经完成 false  未完成true
      distribution: true,
      baoguoList: '',
      //组件是否战士
      rsplitPackageUoload: false,
      current: 0,
      remark: '',
      //明细选项
      titleIndex: 1,
      //未配货steps
      steps: [
        {
          title: '打印配货清单',
          type: 0,
        },
        {
          title: '线下配货完毕',
          type: 1,
        },
        {
          title: '系统生成包裹',
          type: 2,
        },
        {
          title: '完成',
          type: 3,
        },
      ],
      //已配货steps
      steps1: [
        {
          title: '待配货 ',
          type: 0,
          time: '',
        },
        {
          title: '已配货',
          type: 1,
          time: '',
        },
        {
          title: '待提货',
          type: 2,
          time: '',
        },
        {
          title: '已提货',
          type: 3,
          time: '',
        },
      ],
      materialList: [
        {
          name: '包裹1',
          id: '1',
          arr: [
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
          ]
        },
        {
          name: '包裹1',
          id: '2',
          arr: [
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
            {
              materialCode: '10090001',
              materialName: '混合喷嘴',
              specifications: '123PH-123PH',
              unit: '瓶',
              unPackedQuantity: '10',
              price: '11.33',
              count: '10',
              totalPrice: '12.00',
            },
          ]
        }

      ],
      materialList1: [
        {
          id: '10090001',
          name: '混合喷嘴',
          specification: '123PH-123PH',
          units: '瓶',
          unpacked: '10',
          price: '11.33',
          numbe: '10',
          money: '12.00',
        },
        {
          id: '10090001',
          name: '混合喷嘴',
          specification: '123PH-123PH',
          units: '瓶',
          unpacked: '10',
          price: '11.33',
          numbe: '10',
          money: '12.00',
        },
        {
          id: '10090001',
          name: '混合喷嘴',
          specification: '123PH-123PH',
          units: '瓶',
          unpacked: '10',
          price: '11.33',
          numbe: '10',
          money: '12.00',
        },
        {
          id: '10090001',
          name: '混合喷嘴',
          specification: '123PH-123PH',
          units: '瓶',
          unpacked: '10',
          price: '11.33',
          numbe: '10',
          money: '12.00',
        },
      ],
      //物料总数量
      materialNum: 0,
      //已打包
      materialPackOk: 0,
      //未打包
      materialPackNo: 0,
      newDay: '',
      newHouer: '',
      newMinute: '',
      newSs: ''
    }
  },
  methods: {
    //详情获取
    getList (id) {
      this.id = id
      this.$store.dispatch('request', this.$api.sellerCenter.distributeDetails(this.id)).then(res => {
        this.getList1()
        this.getOrderLog(res)
        console.log(res.result);
        this.distributionDetailsArr = res.result
        console.log(this.distributionDetailsArr);
        //时间统一转换
        this.timeFormat(res)
        //计算物料总数等
        this.getmateriaNum(res.result.distributionMaterialDTOList)
        if (this.distributionDetailsArr.state === '0') {
          this.detailsHeight = '188px'
        } else {
          this.detailsHeight = '100%'
        }

      })
    },
    //订单日子
    getOrderLog (res) {
      console.log(this.form);
      this.$store.dispatch('request', this.$api.sellerCenter.getOrderLogList(res)).then(res => {
        console.log(res);
      })
    },
    //获取包裹详情
    getList1 () {
      this.$store.dispatch('request', this.$api.sellerCenter.distribution(this.id)).then(res => {
        console.log(res.result, 'res.result');
        this.distributionParcelDTOList = res.result.distributionParcelDTOList
        this.baoguoList = res.result
        console.log(this.distributionParcelDTOList, '123123123')
      })
    },
    //计算物料数量
    getmateriaNum (item) {
      this.materialNum = ''
      this.materialPackOk = ''
      this.materialPackNo = ''
      console.log(item);
      for (let i = 0; i < item.length; i++) {
        this.materialNum = Number(this.materialNum) + item[i].totalQuantity
        this.materialPackOk = Number(this.materialPackOk) + item[i].packedQuantity
      }
      console.log(this.materialNum, this.materialPackOk,);
      this.materialPackNo = this.materialNum - this.materialPackOk
    },
    //时间统一转换
    timeFormat (res) {
      //订单完成时间
      this.distributionDetailsArr.createAt = this.$dateTrans(res.result.createAt).format('yyyy-MM-dd hh:mm:ss');
      //期望待配货时间
      this.distributionDetailsArr.expectDistributeTime = this.$dateTrans(res.result.expectDistributeTime).format('yyyy-MM-dd hh:mm:ss');
      this.distributionDetailsArr.expectDistributeTimeDate = this.distributionDetailsArr.expectDistributeTime.split(' ')[0]
      let time = this.distributionDetailsArr.expectDistributeTime.split(' ')[1]
      this.distributionDetailsArr.expectDistributeTimeHH = time.split(':')[0]
      this.distributionDetailsArr.expectDistributeTimeMM = time.split(':')[1]
      //配货完成时间
      this.distributionDetailsArr.distributeFinishTime = this.$dateTrans(res.result.distributeFinishTime).format('yyyy-MM-dd hh:mm:ss');
      //确认上门提货时间
      if (res.result.homeDeliveryTime !== null) {
        this.distributionDetailsArr.homeDeliveryTime = this.$dateTrans(res.result.homeDeliveryTime).format('yyyy-MM-dd hh:mm:ss');
        this.distributionDetailsArr.homeDeliveryTimeDate = this.distributionDetailsArr.homeDeliveryTime.split(' ')[0]
        let time1 = this.distributionDetailsArr.homeDeliveryTime.split(' ')[1]
        this.distributionDetailsArr.homeDeliveryTimeHH = time1.split(':')[0]
        this.distributionDetailsArr.homeDeliveryTimeMM = time1.split(':')[1]
      } else {
        this.distributionDetailsArr.homeDeliveryTimeDate = '--'
      }
      //提货完成时间
      this.distributionDetailsArr.actualDeliveryTime = this.$dateTrans(res.result.actualDeliveryTime).format('yyyy-MM-dd hh:mm:ss');
      //当前step
      this.current = Number(this.distributionDetailsArr.state)
      console.log(this.distributionDetailsArr.expectDistributeTime,);
      console.log(this.distributionDetailsArr.distributeFinishTime,);
      console.log(this.distributionDetailsArr.homeDeliveryTime,);
      console.log(this.distributionDetailsArr.actualDeliveryTime,);
      this.steps1[0].time = this.distributionDetailsArr.expectDistributeTime
      this.steps1[1].time = this.distributionDetailsArr.distributeFinishTime
      this.steps1[2].time = this.distributionDetailsArr.homeDeliveryTime
      this.steps1[3].time = this.distributionDetailsArr.actualDeliveryTime
      //订单是否超时
      this.dingdanchaoshi(res.result.state)
    },
    dingdanchaoshi (num) {
      //当前时间
      let newTime = new Date().getTime()
      //待配货
      let Time = ''
      if (num === '0') {
        Time = new Date(this.distributionDetailsArr.expectDistributeTime).getTime()
      } else if (num === '2') {
        Time = new Date(this.distributionDetailsArr.homeDeliveryTimeDate).getTime()
      }
      //期望配货完成时间
      let exceedTime = ''
      if (newTime > Time) {
        exceedTime = newTime - Time
      } else {
        exceedTime = Time - newTime
      }
      //计算出相差天数
      let days = Math.floor(exceedTime / (24 * 3600 * 1000));
      //计算出小时数
      let leave1 = exceedTime % (24 * 3600 * 1000);
      //计算天数后剩余的毫秒数
      let hours = Math.floor(leave1 / (3600 * 1000));
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000);
      //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000));
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000);
      //计算分钟数后剩余的毫秒数
      let seconds = Math.round(leave3 / 1000);

      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;

      this.newDay = days;
      this.newHouer = hours;
      this.newMinute = minutes;
      this.newSs = seconds;
    },
    //拆分组件显示
    addRsplitPackage () {
      this.rsplitPackageUoload = true
      this.$refs.RsplitPackage1.getData(this.id);
    },
    //配货完成
    distributionOk () {
      //先保存备注
      console.log(this.distributionParcelDTOList);
      let getArr = JSON.parse(JSON.stringify(this.distributionParcelDTOList))

      for (let i = 0; i < getArr.length; i++) {
        delete getArr[i].code
        delete getArr[i].distributionMaterialDTOList
        delete getArr[i].name
        delete getArr[i].specifications
        delete getArr[i].subOrderId
        delete getArr[i].weight
      }
      console.log(getArr);

      this.$store.dispatch('request', this.$api.sellerCenter.distributionComment(getArr)).then(res => {
        if (this.materialPackNo !== 0) {
          this.$message.error('请先将物料全部打包！');
          return
        }
        let arr = {}
        this.$store.dispatch('request', this.$api.sellerCenter.distributionOk({
          distributionOrderId: this.distributionDetailsArr.id,
          list: arr
        })).then(res => {
          this.$emit('confirmDistributionDetails', 123);
        })
      })


      // console.log(getArr);
    },
    //拆分确定或取消之后操作
    confirmFileRsplitPackage () {
      this.titleIndex = 1
      this.rsplitPackageUoload = false
      this.getList(this.id)
    },
    afterVisibleChange (val) {

    },
    //打印包裹清单
    addPrintPackage (baoguoList) {
      this.printStatus = true
      this.$refs.printPackage1.getData(baoguoList);
    },
    confirmPrint () {
      this.printStatus = false

    },
    handleCancel () {
      this.checklist = false
    },
    handleCanOk () {
      this.checklist = false
    },
    handleClick (event) {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    },
    //切换财务配件
    cutTitle (e) {
      this.titleIndex = e
    },

    //确定新增
    handleOk () {
      console.log(123123);
      this.$emit('confirmDistributionDetails', 123);
    },
    //取消新增 如果form表单没值就是第一次新增 有值就是取消修改取消新增
    cancelOK () {
      this.$emit('cancel')

    },
    onClose () {
    }
  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.details-status {
  width: 984px;
  height: 100%;
  margin-bottom: 24px;

  .status-left {
    width: 268px;
    height: 100%;
    background-color: @greyBackground;
    padding: 38px 24px;
    float: left;
    font-size: 12px;

    .ant-col-8 {
      color: @newColorGreyFont;
    }

    .ant-col-16 {
      color: @newColorGreyFontM;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .row-style {
      margin-top: 16px;
      padding-bottom: 30px;
      max-height: 32px;
    }
  }

  .status-right {
    width: 984px;
    height: 100%;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
    padding-left: 303px;

    .status-right-top {
      border-bottom: 1px dashed #f2f2f2;
      padding-top: 13px;
      padding-bottom: 13px;

      > div {
        color: @newColorGreyFont;
        font-size: 12px;
      }

      .chaoshi {
        height: 20px;
        font-style: italic;
        line-height: 20px;
        font-size: 14px;
        color: @activeRed;
        font-weight: 700;
        margin-bottom: 16px;

        span {
          padding-left: 4px;

          i {
            font-size: 20px;
            margin-right: 4px;
          }
        }
      }

      .top1 {
        height: 24px;
        line-height: 24px;

        i {
          font-style: normal;
          font-size: 16px;
          color: @activeRed;
          line-height: 24px;

          span {
            width: 24px;
            height: 24px;
            line-height: 23px;
            background: @activeRed;
            color: #fff;
            display: inline-block;
            border-radius: 2px;
            text-align: center;
          }

          span:nth-child(1) {
            margin-left: 6px;
          }
        }
      }

      .top2 {
        margin-top: 12px;
        height: 18px;
        line-height: 18px;

        span {
          color: #ff8406;
          font-size: 14px;
        }
      }

      .top3 {
        height: 24px;
        line-height: 24px;

        i {
          font-style: normal;
        }
      }

      .anticon-clock-circle,
      .anticon-info-circle {
        font-size: 15px !important;
        margin-right: 4px;
        color: @colorGreyFontM !important;
      }
    }

    .status-right-bottom {
      padding: 15px 56px 0 0;

      .steps1 {
        /deep/ .ant-steps {
          .ant-steps-item {
            margin-right: 0;

            &:nth-child(1) {
              .ant-steps-item-title::before {
                width: 0;
              }
            }

            .ant-steps-item-title {
              &::before {
                position: absolute;
                left: -55px;
                display: block;
                top: 10px;
                width: 22px;
                height: 2px;
                background: #f8dfdf;
                content: "";
              }
            }

            .ant-steps-item-icon {
              margin-left: 26px;
            }

            .ant-steps-item-title::after {
              background: #f8dfdf;
              top: 10px;
              left: -3px;
              height: 2px;
            }
          }
        }
      }

      .steps1s {
        /deep/
          ant-steps
          .ant-steps-item:nth-child(1)
          .ant-steps-item-title::before {
          width: 0;
        }

        /deep/ .ant-steps .ant-steps-item .ant-steps-item-title::before {
          left: -73px;
          width: 36px;
        }

        /deep/ .ant-steps .ant-steps-item .ant-steps-item-title::after {
          left: 1px;
        }

        /deep/ .ant-steps .ant-steps-item .ant-steps-item-icon {
          margin-left: 44px;
        }

        .slotDiv {
          margin-left: -53px;
        }

        .slotDiv1 {
          margin-left: -70px;
        }
      }
    }
  }
}

.details-list {
  .details-list-title {
    height: 37px;
    font-size: 14px;
    color: @newColorGreyFontM;
    border-bottom: 1px solid #f8f8f8;

    span {
      margin-right: 40px;
      display: inline-block;
      height: 37px;
      cursor: pointer;
    }

    .active {
      font-size: 14px;
      color: @activeRed;
      border-bottom: 3px solid @activeRed;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
    }
  }

  .details-packbutton {
    height: 32px;
    margin: 16px 0;

    > .ant-btn {
      float: left;
      cursor: pointer;
      width: 96px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-size: 12px;
      margin-right: 8px;
      border-radius: 2px;
      padding: 0;

      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }

    .chaifen {
      color: #fff;
      background: @activeRed;
      border: none;
    }

    .qingdan {
      width: 120px;
      line-height: 30px;
      border: 1px solid @activeRed;
      background: #fcefef !important;
      color: @activeRed !important;
    }

    > div:nth-child(1) {
      background-color: #3b82ff;
      color: #fff;
    }

    > div:nth-child(2) {
      text-align: left;
    }
  }

  .details-list-material-box {
    height: 240px;
  }

  .details-list-parcel-box {
    margin-top: 16px;

    .ant-btn {
      width: 96px;
      height: 32px;
      border: 1px solid @newBorder;
      line-height: 30px;
      text-align: center;
      font-size: 12px;
      padding: 0;
      margin-bottom: 16px;

      img {
        width: 15px;
        height: 15px;
        margin-right: 8px;
        vertical-align: sub;
      }
    }

    .zanwu {
      text-align: center;

      img {
        margin-top: 87px;
        width: 166px;
        height: 120px;
        margin-bottom: 30px;
      }

      p {
        font-size: 14px;
        color: @newColorGreyFontM;
        margin-bottom: 24px;
      }

      .ant-btn {
        width: 72px;
        height: 32px;
        border-radius: 2px;
        background: @activeRed;
      }
    }

    .extra-left {
      .zk {
        display: none;
      }

      .gb {
        display: block;
      }

      img {
        width: 18px;
        height: 18px;
        margin-right: 24px;
        position: absolute;
        left: 16px;
        top: 15px;
      }
    }

    .extra-right {
      position: absolute;
      width: 50px;
      height: 100%;
      text-align: center;
      right: 24px;
      top: 0;
      padding-top: 12px;

      img {
        width: 16px;
        height: 16px;
      }
    }
  }

  //通用
  .material-tit {
    height: 48px;
    line-height: 48px;
    font-weight: 500;
    background: #f9f9f9;
    border-bottom: 1px solid @greyDeepBackground;

    span {
      font-size: 12px;
      color: @newColorGreyFontM;
      font-weight: 500;
      float: left;
      text-align: left;
    }

    span:nth-child(1) {
      padding-left: 12px;
      width: 10%;
    }

    span:nth-child(2) {
      width: 28%;
    }

    span:nth-child(3) {
      width: 14%;
    }

    span:nth-child(4) {
      width: 9%;
    }

    span:nth-child(5) {
      width: 12%;
    }

    span:nth-child(6) {
      width: 9%;
    }

    span:nth-child(7) {
      width: 9%;
    }

    span:nth-child(8) {
      width: 9%;
    }
  }

  .material-tit-li {
    height: 49px;
    line-height: 49px;
    border-bottom: 1px solid @greyDeepBackground;

    span {
      font-size: 12px;
      color: @newColorGreyFontM;
      height: 48px;
      float: left;
      text-align: left;
      padding-left: 1px;
    }

    span:nth-child(1) {
      padding-left: 12px;
      width: 10%;
    }

    span:nth-child(2) {
      width: 28%;
    }

    span:nth-child(3) {
      width: 14%;
    }

    span:nth-child(4) {
      width: 9%;
    }

    span:nth-child(5) {
      width: 12%;

      i {
        font-style: normal;
      }
    }

    span:nth-child(6) {
      width: 9%;
    }

    span:nth-child(7) {
      width: 9%;
    }

    span:nth-child(8) {
      width: 9%;
    }
  }

  .toolpits {
    background: #3b82ff;
  }

  .material-remark {
    padding: 16px 0 16px 0;
    background: #f9f9f9;

    span {
      font-size: 14px;
      color: @newColorGreyFontM;
      padding-right: 6px;
    }

    input {
      border: 1px solid rgba(0, 0, 0, 0.08);
      height: 32px;
      line-height: 32px;
      border-radius: 3px;
      width: 95%;
    }
  }

  .remark-style {
    margin-bottom: 50px;

    .material-tit {
      span:nth-child(2) {
        width: 30%;
      }

      span:nth-child(3) {
        width: 20%;
      }

      span:nth-child(6) {
        width: 11%;
      }

      span:nth-child(7) {
        width: 8%;
      }
    }

    .material-tit-li {
      span:nth-child(2) {
        width: 30%;
      }

      span:nth-child(3) {
        width: 20%;
      }

      span:nth-child(6) {
        width: 11%;
      }

      span:nth-child(7) {
        width: 8%;
      }
    }
  }
}

.details-bottom {
  position: absolute;
  width: 1016px;
  height: 48px;
  bottom: 0;
  left: -0;
  line-height: 48px;
  padding-left: 19px;
  background: #fff;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.06);

  > span {
    float: left;
    font-size: 14px;
    color: @colorCommonFont;
    margin-right: 24px;

    i {
      font-style: normal;
      color: @activeRed;
      font-size: 16px;
    }
  }

  > span:nth-child(4) {
    width: 120px;
    height: 48px;
    background: @activeRed;
    float: right;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-right: 0;
    cursor: pointer;
  }
}

.foots {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  line-height: 56px;
  background: #fff;
  box-shadow: 0px 1px 0px 0px #f4f5f8 inset;

  .foots-left {
    float: left;
    padding-left: 7px;

    span {
      padding-left: 18px;
      padding-right: 16px;
      border-right: 1px solid #f2f2f2;
      font-size: 12px;
      color: @newColorGreyFont;

      img {
        width: 16px;
        height: 16px;
        vertical-align: text-bottom;
        margin-right: 10px;
      }

      i {
        font-style: normal;
        font-size: 14px;
        color: @newColorGreyFontM;
      }
    }

    span:nth-child(3) {
      border-right: none;
    }
  }

  .foots-right {
    width: 128px;
    height: 56px;
    background: @activeRed;
    color: #fff;
    float: right;
    line-height: 56px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }
}

/deep/ .ant-drawer-title {
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: @newColorGreyFontM;
}

.activebutton {
  background: #ccc !important;
}

/deep/ .anticon {
  vertical-align: -0.2em;
}

/deep/ .ant-row {
  height: 12px;
}

/deep/ .ant-collapse {
  border: none;
  background: #fff;

  .ant-collapse-item {
    width: 984px;
    border: none;
    background: #f9f9f9;
    margin-bottom: 16px;
  }
}

/deep/ .ant-collapse-content {
  border-top: none;
  margin: 16px 8px 0;

  .ant-collapse-content-box {
    padding: 0;

    .material-tit {
      background: #fff;
    }
  }
}

/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 13px 16px;
  height: 48px;
  line-height: 22px;
  padding-left: 56px;
  font-size: 14px;
  background: #fff;
  color: @newColorGreyFontM;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 1px 0px 0px #f8f8f8 inset,
    1px 0px 0px 0px #f8f8f8 inset, -1px 0px 0px 0px #f8f8f8 inset;
}

/deep/ .ant-collapse > .ant-collapse-item-active .zk {
  display: block !important;
}

/deep/ .ant-collapse > .ant-collapse-item-active .gb {
  display: none !important;
}

.ant-divider {
  background: #fff;
}

.slotDiv {
  margin-top: 25px;
  font-size: 12px;
  color: @colorGreyFontM;
  width: 72px;
  text-align: center;
  margin-left: -52px;
  text-align: center;
}

.slotDiv1 {
  margin-left: -30px;
  margin-bottom: 14px;
  font-size: 12px;
  color: @colorGreyFont;
}

.slotImg {
  width: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

.color {
  color: @activeRed;
}

.colordiv {
  background: @activeRed !important;
}

.iconimg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: @greyBorder;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}

.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}

/deep/ .ant-anchor-wrapper {
  .ant-anchor-ink {
    &::before {
      width: 6px;
      background: @greyDeepBackground;
    }

    .ant-anchor-ink-ball {
      border: none;
      width: 0;
      height: 0;

      &::after {
        width: 6px;
        height: 40px;
        content: "";
        position: relative;
        top: -17px;
        left: -3px;
        display: inline-block;
        border-radius: 3px;
        background: @activeRed;
      }
    }
  }

  .ant-anchor-link {
    padding: 0 0 0 22px;
    height: 42px;
    line-height: 42px;

    a {
      &:hover {
        color: @activeRed;
      }
    }
  }
}

/deep/ .ant-modal-body {
  border-bottom: 1px solid @greyDeepBackground !important;
}

.steps1s {
  /deep/ .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
    top: -7px;
    font-size: 20px;
  }
}

.color1 {
  color: @colorGreyFont;
}

.checklist-class .ant-input {
  border: none;
  background: #f1f1f1;
  border-radius: 0;
  float: left;
  margin: 0 2px;
}

.checklist-class span {
  width: 32px;
  height: 32px;
  background: #fafafa;
  border-radius: 2px 0px 0px 2px;
  float: left;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}

.texte-class /deep/ .ant-btn {
  font-size: 12px !important;
  width: 72px !important;
  height: 32px !important;
  line-height: 30px !important;
  border-radius: 2px !important;
  padding: 0;
}

@media screen and (max-width: 1440px) {
  // .ant-drawer-content-wrapper {
  //   width: 1100px !;
  // }
  // .details-status .status-left {
  //   width: 268px;
  //   padding: 38px 24px;
  // }
  // .status-left {
  //   font-size: 12px !important;
  // }
  // .top1,
  // .top3,
  // .top2 {
  //   font-size: 12px !important;
  // }
  // .top1 i {
  //   font-size: 16px !important;
  // }
  // .top2 span {
  //   font-size: 14px !important;
  // }
  // .details-list .material-tit span {
  //   font-size: 12px;
  // }
  // .details-list .material-tit-li span {
  //   font-size: 12px;
  // }
  // .foots {
  //   line-height: 56px;
  //   height: 56px;
  // }
  // .foots .foots-right {
  //   height: 56px;
  //   line-height: 56px;
  //   font-size: 14px;
  // }
  // .foots .foots-left span {
  //   font-size: 12px;
  // }
  // .foots .foots-left span i {
  //   font-size: 14px;
  // }
  // /deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  //   font-size: 14px;
  // }
}
</style>
